<template>
  <header id="t-header">
    <div class="logo-nav">
      <nuxt-link to="/" class="logo">
        <img src="@/assets/image/logo.png" height="100%" />
      </nuxt-link>
      <ul class="nav">
        <li class="nav-li">
          <nuxt-link to="/" prefetch>首页</nuxt-link>
        </li>
        <li class="nav-li">
          <!--<nuxt-link to="/products_services">产品与服务</nuxt-link>-->
          <nuxt-link to="/products_services?guideType=1" class="guide-a">
            <span>产品与服务</span>
            <ul class="guide-list">
              <!-- <li class="guide-item" style="text-align: center; padding: 0.8rem 0;">
                        <nuxt-link to="/products_services?guideType=6">
                          鲸禧卡
                        </nuxt-link>
                      </li> -->
              <li class="guide-item">
                <nuxt-link to="/products_services?guideType=1">
                  权益输出
                </nuxt-link>
              </li>
              <li class="guide-item">
                <nuxt-link to="/products_services?guideType=2">
                  企业福利
                </nuxt-link>
              </li>
              <!-- <li class="guide-item">
                <nuxt-link to="/products_services?guideType=3">
                  电商销售
                </nuxt-link>
              </li> -->
              <li class="guide-item">
                <nuxt-link to="/products_services?guideType=4">
                  京东慧采
                </nuxt-link>
              </li>
              <li
                class="guide-item"
                style="text-align: center; padding: 0.8rem 0"
              >
                <nuxt-link to="/products_services?guideType=5">
                  SaaS云平台
                </nuxt-link>
              </li>
            </ul>
          </nuxt-link>
        </li>
        <!--              <li class="nav-li">-->
        <!--                <nuxt-link to="/supplyChain">供应链</nuxt-link>-->
        <!--              </li>-->
        <li class="nav-li">
          <nuxt-link to="/solution">解决方案</nuxt-link>
        </li>
        <li class="nav-li">
          <nuxt-link to="/openPlatform">开放平台</nuxt-link>
        </li>
        <!-- <li class="nav-li">
          <nuxt-link to="/news">新闻中心</nuxt-link>
        </li> -->
        <li class="nav-li">
          <!--<nuxt-link to="/products_services">产品与服务</nuxt-link>-->
          <nuxt-link to="/aboutUs?guideType=1" class="guide-a">
            <span>关于我们</span>
            <ul class="guide-list">
              <li class="guide-item">
                <nuxt-link to="/aboutUs?guideType=1"> 关于我们 </nuxt-link>
              </li>
              <li class="guide-item">
                <nuxt-link to="/aboutUs?guideType=2"> 招聘信息 </nuxt-link>
              </li>
              <!-- <li class="guide-item">
                <nuxt-link to="/aboutUs?guideType=4"> 预付卡章程 </nuxt-link>
              </li> -->
            </ul>
          </nuxt-link>
        </li>
        <li class="nav-li">
          <nuxt-link to="/contactUs">联系我们</nuxt-link>
        </li>
      </ul>
    </div>
  </header>
</template>

<script>
export default {
  name: "t-header",
};
</script>

<style scoped lang="scss">
#t-header {
  .logo-nav {
    width: 117rem;
    height: 8rem;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 2.7rem;
    .logo {
      height: 6rem;
      position: relative;
      img {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .nav {
      display: flex;
      .nav-li {
        font-size: 1.5rem;
        & > a {
          display: flex;
          align-items: center;
          line-height: 8rem;
          height: 8rem;
          color: #4b4b4b;
          padding: 0 2.6rem;
          position: relative;
          &:hover {
            color: #d31b1b;

            .guide-list {
              display: block;
            }
            &:before {
              border-right: 1px solid #d31b1b;
              border-top: 1px solid #d31b1b;
              transform: rotate(-45deg);
              margin-top: 0.3rem;
            }
          }
        }

        & > .nuxt-link-exact-active {
          color: #d31b1b;
          &:after {
            content: "";
            display: block;
            width: 1.6rem;
            height: 0.2rem;
            background: #d31b1b;
            position: absolute;
            bottom: 2.3rem;
          }
        }
        .guide-list {
          display: none;
          padding: 1rem 0;
          position: absolute;
          top: 7rem;
          left: 1rem;
          width: 11.4rem;
          background-color: #fff;
          box-shadow: 0 0.1rem 0.4rem 0 #d31b1b;
          z-index: 999;
          .guide-item {
            line-height: 1.9rem;
            padding: 0.8rem 2.5rem;
            &:hover {
              a {
                color: #d31b1b;
              }
            }
            & > a {
              color: #4b4b4b;
              white-space: nowrap;
            }
          }
        }
        .guide-a:before {
          content: "";
          display: block;
          width: 0.8rem;
          height: 0.8rem;
          border-right: 1px solid #4b4b4b;
          border-top: 1px solid #4b4b4b;
          position: absolute;
          right: 0.8rem;
          margin-top: -0.3rem;
          transform: rotate(135deg);
          transition: all 0.5s;
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  li {
    font-size: 1.3rem;
  }
  .guide-a:before {
    border: none !important;
  }
}
</style>
